<template>
    <div class="cvu-callapse">
        <Collapse
            v-model="currentValue"
            :accordion="accordion"
            :simple="simple"
            @on-change="handleChange"
        >
            <slot></slot>
        </Collapse>
    </div>
</template>
<script>
import common from '../../../until/common'
export default {
    name: 'cvu-collapse',
    props: {
        // 当前激活的面板的 name，可以使用 v-model 双向绑定
        value: [Array, String],
        // 是否开启手风琴模式，开启后每次至多展开一个面板
        accordion: {
            type: Boolean,
            default: false
        },
        // 是否开启简洁模式
        simple: {
            type: Boolean,
            default: false
        },
        // 是否可全部关闭
        closeAll: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            currentValue: this.value,
            oldCurrentValue: this.value
        }
    },
    watch: {
        value (val) {
            this.currentValue = val
            this.oldCurrentValue = val
        }
    },
    methods: {
        handleChange(e) {
            // 至少展开一项切不可关闭
            if(!this.closeAll) {
                if(e.length > 0) {
                    this.oldCurrentValue = e[0]
                } else {
                    this.currentValue[0] = this.oldCurrentValue
                    this.$emit('on-change', e)
                    return false
                }
            }
            this.$emit('on-change', e)
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../../style/_index.scss';
</style>